<template>
  <div class="shopcart">
    <tab-bar></tab-bar>
    <section class="shopcart-page">
      <div class="shopcart-list">
        <shopcart-box
          v-for="item in carList"
          :key="item.id"
          :car="item"
        ></shopcart-box>
      </div>
    </section>
    <van-submit-bar
      :price="this.$store.getters.goodsCP.allPrice"
      button-text="提交订单"
      @submit="onSubmit"
      v-if="carList.length > 0"
    >
      <van-checkbox
        v-model="checked"
        checked-color="#F63515"
        @change="changeAll"
        >全选</van-checkbox
      >
    </van-submit-bar>
    <div v-else>
      <div class="shopcart-empty">
        <img
          src="//img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
        />
        <p>购物车空空如也，去逛逛吧~</p>
      </div>
    </div>
    <section class="recommend">
      <div class="recommend-title">
        <van-divider :style="{ borderColor: '#ccc', padding: '0 16px' }"
          >可能你还想要</van-divider
        >
      </div>
      <div class="recommend-list">
        <div
          class="recommend-item"
          v-for="(item, index) in recommendList"
          :key="index"
          @click="goDetail(item.id)"
        >
          <img :src="item.imageHost + item.mainImage" />
          <p>{{ item.subtitle }}</p>
          <i>￥ {{ item.price }}</i>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import tabBar from "../../components/tabBar.vue";
import shopcartBox from "../../components/shopcartBox.vue";
import { getCarList, recommend } from "../../api/axios";
export default {
  name: "shopcart",
  components: { tabBar, shopcartBox },
  data() {
    return {
      carList: [], // 存储购物车数据
      recommendList: [], // 存储推荐商品
      checked: false,
    };
  },
  created() {
    this.fetchCarList();
    this.fetchRecommend();

    this.$bus.$on("delCar", (id) => {
      this.refreshCar(id);
      // this.$bus.$emit("badge", this.carList.length);
    });
  },
  methods: {
    fetchCarList() {
      getCarList().then((res) => {
        let goodsList = [];
        // console.log("购物车", res);
        this.carList = res.data;
        // this.$bus.$emit("badge", this.carList.length);
        this.carList.forEach((v) => {
          const goods = {
            id: v.productId,
            productId: v.id,
            count: v.count,
            price: v.price,
            ischecked: false,
          };
          goodsList.push(goods);
        });
        // 将数据添加到store中
        this.$store.commit("addGoods", goodsList);
      });
    },
    fetchRecommend() {
      recommend().then((res) => {
        // console.log("推荐", res);
        this.recommendList = res.data;
      });
    },
    refreshCar(id) {
      const index = this.carList.findIndex((v) => v.id == id);
      this.carList.splice(index, 1);
      // store中移出商品
      console.log("shuju========", id);
      this.$store.commit("removeGoods", id);
    },
    // 点击进入详情页
    goDetail(id) {
      this.$router.push({ path: "/product", query: { id } });
    },
    onSubmit() {
      console.log("======");
    },
    changeAll(e) {
      this.$bus.$emit("change", e);
      this.$store.state.cars.forEach((item) => {
        item.ischecked = e;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin";
.recommend {
  margin-bottom: 100px;
  .recommend-list {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;

    .recommend-item {
      display: flex;
      flex-direction: column;
      width: 50%;
      padding: 20px;
      @include boxSizing;
      border-bottom: 1px solid #dcdcdc;

      &:nth-child(2n-1) {
        border-right: 1px solid #dcdcdc;
      }

      img {
        width: 100%;
        height: 290px;
        margin: 0 auto;
      }

      p {
        height: 60px;
        padding: 20px 0;
        font-size: 26px;
        line-height: 40px;
        color: #333;
        overflow: hidden;
      }

      i {
        font-style: normal;
        font-size: 32px;
        color: $red;
      }
    }
  }
}
.van-submit-bar {
  bottom: 100px;
  background-color: #f7f7f7;
}

.shopcart-empty {
  width: 100%;
  padding: 60px 0;
  text-align: center;
  background: #f7f7f7;

  p {
    font-size: 30px;
    padding-top: 20px;
    color: rgba(51, 51, 51, 0.66);
  }
}
</style>